/*************************************************************/
/* 管理首页 > 统计和管理 > 资源管理 */
/*************************************************************/
// 导入全局变量
@import "../../../assets/styles/global-variable.less";

.ResourceManage {
    // 表单内容面板
    .manage-panel{
        padding: @main-container-padding;
        // 资源管理表单
        .resource-manage-form {
            max-width: 822px;
            padding: 12px 18px 20px 0;
            .theme-border-shadow();
            .ground-glass-white();
            h2 {
                text-align: center;
                color: @theme-color;
                margin: 1rem 0 1.2rem;
            }
            // 表单行
            .form-line {
                padding-bottom: 20px;
                position: relative;
                // 更小的表单行间距
                &.small-gap {
                    padding-bottom: 10px;
                }
                // 更大的间距
                &.large-gap {
                    padding-bottom: 42px;
                }
                input,select,textarea {
                    padding: 8px 6px;
                    background-color: #faf4f1;
                    box-sizing: border-box;
                    outline: none;
                    border: @theme-box-border;
                    border-radius: 3px;
                    &:focus {
                        border-color: lighten(@theme-color, 12%);
                        box-shadow: 0 0 10px @theme-color;
                    }
                }
                label,input,select,span.reqired {
                    vertical-align: middle;
                }
                & > label {
                    width: 8rem;
                    text-align: right;
                    display: inline-block;
                    margin-right: 4px;
                    &::after {
                        content: "：";
                    }
                }
                input {
                    width: 622px;
                }
                select {
                    width: 306px;
                    &.select-inline {
                        margin-right: 10px;
                        &:last-of-type {
                            margin-right: 0;
                        }
                    }
                    &:disabled {
                        cursor: not-allowed;
                    }
                }
                textarea {
                    width: 622px;
                    min-height: 110px;
                    max-height: 80vh;
                    vertical-align: top;
                    resize: vertical;
                }
                // 必须项
                span.reqired {
                    width: 16px;
                    height: 16px;
                    text-align: center;
                    font-size: 18px;
                    line-height: 16px;
                    color: @danger-color;
                    display: inline-block;
                    margin-left: 6px;
                }
                // 偏移容器，使之和表单元素对齐
                .offset-left {
                    margin-left: calc(8rem + 4px);
                }
                // 预览图片容器
                .preview-image-container {
                    width: 306px;
                    height: 306px;
                    overflow: hidden;
                    background-color: #eaeaea;
                    .theme-border-shadow();
                    .ant-image {
                        width: 100%;
                        height: 100%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        // 上传预览图片
                        .preview-image {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }
                    }
                }
                // 按钮组容器
                &.btn-group {
                    button {
                        margin-right: 1rem;
                    }
                }
                // 提示信息
                .tips {
                    font-size: 14px;
                    color: #8f9ea5;
                    position: absolute;
                    left: calc(8rem + 4px);
                    bottom: 16px;
                }
            }
        }
    }

}